import React, { PureComponent } from 'react';
import { Card, Icon, Spin, Button } from 'antd';
import { connect } from 'dva';
import ReactJson from 'react-json-view'
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
// import classNames from 'classnames';
// import styles from './JobDetail.less'

@connect(({ JobDetailModel, loading }) => ({
  JobDetailModel,
  quetyLoading: loading.effects['JobDetailModel/getAlertJobInfo'],
}))
export default class JobDetail extends PureComponent {

  state = {
    tabList: [
      { key: 'AlertConfig', tab: 'AlertConfig', type: 'static' },
      { key: 'JobBriefInfo', tab: 'JobBriefInfo', type: 'static' },
      { key: 'JobSettings', tab: 'JobSettings', type: 'static' },
    ],
    tabActiveKey: "AlertConfig",
  }

  // 数据初始化
  componentDidMount() {
    const { dispatch, match: { params: { name } } } = this.props;
    dispatch({ type: 'JobDetailModel/getAlertJobInfo', payload: { name } });
  }

  getAlertConfig = () => {
    const { JobDetailModel: { jobInfo: { alertConfig } } } = this.props;
    if (!alertConfig) return '';
    return (
      <ReactJson src={alertConfig} name={false} iconStyle="circle" displayObjectSize={false} displayDataTypes={false} enableClipboard={true} collapsed={false} />
    );
  }

  getJobBriefInfo = () => {
    const { JobDetailModel: { jobInfo: { jobBriefInfo } } } = this.props;
    if (!jobBriefInfo) return '';
    return (
      <ReactJson src={jobBriefInfo} name={false} iconStyle="circle" displayObjectSize={false} displayDataTypes={false} enableClipboard={true} collapsed={false} />
    );
  }

  getJobSettings = () => {
    const { JobDetailModel: { jobInfo: { jobSettings } } } = this.props;
    if (!jobSettings) return '';
    return (
      <ReactJson src={jobSettings} name={false} iconStyle="circle" displayObjectSize={false} displayDataTypes={false} enableClipboard={true} collapsed={false} />
    );
  }

  render() {
    const { tabList, tabActiveKey } = this.state;
    const { dispatch, quetyLoading, JobDetailModel: { name } } = this.props;
    return (
      <PageHeaderLayout
        logo={(<Icon type="alert" theme="twoTone" style={{ fontSize: '26px' }} />)}
        title={`告警配置-[${name}]`}
        tabList={tabList}
        tabActiveKey={tabActiveKey}
        onTabChange={key => this.setState({ tabActiveKey: key })}
        action={(
          <Button type="primary" onClick={() => dispatch({ type: 'JobDetailModel/getAlertJobInfo', payload: { name } })} loading={quetyLoading}>刷新</Button>
        )}
      >
        <Spin delay={100} spinning={quetyLoading}>
          <Card bordered={false}>
            <div style={{ display: (tabActiveKey === "AlertConfig") ? undefined : 'none' }}>
              {this.getAlertConfig()}
            </div>
            <div style={{ display: (tabActiveKey === "JobBriefInfo") ? undefined : 'none' }}>
              {this.getJobBriefInfo()}
            </div>
            <div style={{ display: (tabActiveKey === "JobSettings") ? undefined : 'none' }}>
              {this.getJobSettings()}
            </div>
          </Card>
        </Spin>
      </PageHeaderLayout>
    );
  }
}
